watch深度监听失效解决方案以及原因

您所在的位置：网站首页 › 监听vuex数据变化监听不到 › watch深度监听失效解决方案以及原因

watch深度监听失效解决方案以及原因

2023-11-01 16:21| 来源: 网络整理| 查看: 265

总结：

watch深度监听失效一般是由于变化的属性未初始化，导致watch进行深度监听初始化时，没有录入进去，从而导致监听失效。可以使用this.$set(监听的对象, 未初始化的监听对象的属性, 改动后的值)这样可以必然触发watch的监听。

案发情况：

首先，watch监听一般都这么写：

watch: { obj(newVal, oldVal) { // todo console.log(newVal, oldVal) } }

但是watch如果要监听对象里面的属性，那么需要这么写，上面是简写，现在就需要详写，并且配置deep: true，打开深度监听开关。

watch: { obj: { handler(newVal, oldVal) { // todo console.log(newVal, oldVal) }, deep: true, // 是否开启深度监听 immediate: true, // 是否初始化时就执行一次 } }

但是有时候我们会遇到这样的：

先是页面初始化，能看到正常的数据展示：展示父组件传递的值：{name: 'clw'}，然后触发方法changeObj，给对象增加了一个属性id，以及值1，但是子组件的watch却监听不到，即使开启了深度监听，也是一样的问题。

这是因为vue在初始化时，虽然开启了深度监听，但它只会监听父组件data中obj已有的属性name，新增的id属性不会监听，这个可以去了解下vue的源码或者监听实现。

vue对于这种情况给出2种解决方式：

方式一：如果知道会新增的属性，那么在父级初始化的data的obj中也写上该属性，比如目前就是：obj: {name: 'clw', id: ''}，这样深度监听时自然也会把id属性监听上。方式二：使用this.$set()方法，手动告诉vue需要监听该参数，比如此处需要在父级的changeObj方法中把this.obj.id = '1'改为this.$set(this.obj, 'id', '1')这样。即：this.$set(监听的对象, 未初始化的监听对象的属性, 改动后的值)。 // 父组件 export default{ data() { return { obj: { name: 'clw' } } }, methods: { changeObj() { this.obj.id = '1' } } } // 子组件展示父组件传递的值：{{msg}} export default{ props: { obj: { type: Object, default: {} } }, data() { return { msg: '' } }, watch: { obj: { handler(newVal, oldVal) { this.msg = JSON.stringify(newVal) }, deep: true, immediate: true } } }

【本文地址】

watch深度监听失效解决方案以及原因

watch深度监听失效解决方案以及原因

今日新闻

推荐新闻